<template>
    <div style="height:100%;width:100%;">
        <bar class="bar" @on-back="$router.back()" :title="item.cardId + '的信息'">
            <div slot="right">
                <div v-if="!status" @click="show1 = true">更多</div>
                <div v-if="status" @click="show2 = true">更多</div>
            </div>
        </bar>
        <group class="myTanker-block">
            <cellBox>
                <div><img src="../../../assets/logo1.png" style="vertical-align: middle;height:35px;margin-right:10px;" />油巴加油机管理平台</div>
            </cellBox>
        </group>
        <group>
            <cell title="IC卡号" :value="item.cardId"></cell>
            <cell title="用户姓名" is-link :value="item.userName" @click.native="$router.push('/icName/'+ $route.params.which +'/' + $route.params.index)"></cell>
            <cell title="用户手机" is-link :value="item.mobile" @click.native="$router.push('/icTName/'+ $route.params.which +'/' + $route.params.index)"></cell>
            <cell title="单位" is-link :value="item.company" @click.native="$router.push('/icAddr/'+ $route.params.which +'/' + $route.params.index)"></cell>
            <cell title="账户余额" :value="item.balance"></cell>
            <cell title="累计充值金额" :value="item.totalCharge"></cell>
            <cell title="账户状态" is-link @click.native="isShow = true">
                <div>
                    <span style="color:red" v-if="item.status === 2">冻结</span>
                    <span style="color:#44b549" v-if="item.status == 1">正常</span>
                </div>
            </cell>
            <cell title="余额变动时间" :value="item.balanceTime"></cell>
        </group>
        <input-control :title="item.status == 1 ? '冻结账户' : '解冻账户'" @pwdDone="handleInput" :isShow.sync="isShow"></input-control>
        <actionsheet v-model="show1" :menus="menus1" @on-click-menu="handle"></actionsheet>
        <actionsheet v-model="show2" :menus="menus2" @on-click-menu="handleR"></actionsheet>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../../store/constants.vue'
    import {
        lang
    } from 'muka'
    import {
        Bar,
        SelectMenu,
        MInput,
        Mask,
        InputControl,
        Layout
    } from 'muka-ui'
    import {
        Group,
        Cell,
        CellBox,
        Actionsheet,
        Confirm,
        XButton
    } from 'vux'
    import md5 from 'js-md5'
    export default {
        name: 'detailOnly',
        components: {
            Bar,
            Group,
            Cell,
            CellBox,
            SelectMenu,
            Actionsheet,
            'mu-mask': Mask,
            InputControl,
            Confirm,
            Layout,
            'mu-input': MInput,
            XButton
        },
        data: function () {
            return {
                isShow: false,
                item: {},
                value: '',
                show: false,
                show3: false,
                showName: false,
                showTName: false,
                ICAddr: false,
                rName: '',
                tName: '',
                addr: '',
                password: '',
                inShow: true,
                lists: [{
                    label: '解冻'
                }],
                options: [{
                    label: '冻结'
                }, {
                    label: '扣款'
                }, {
                    label: '充值'
                }],
                status: false,
                show1: false,
                show2: false,
                menus1: {
                    menu1: '冻结',
                    menu2: '扣款',
                    menu3: '充值'
                },
                menus2: {
                    menu1: '解冻',
                    menu2: '扣款',
                    menu3: '充值'
                }
            }
        },
        watch: {
            password: function (newVal) {
                let l = newVal.length
                let v = ''
                for (let i = 0; i < l; i++) {
                    v += '·'
                }
                this.value = v
                if (newVal.length === 6) {
                    this.handleInput()
                }
            }
        },
        created: function () {
            if(this.$route.params.which === "1")
            {
                this.item = this.cardList[this.$route.params.index]
            }
            else
            {
                this.item = this.searchCardList[this.$route.params.index]
            }

            if (this.item.status === 2) {
                this.status = true
            } else {
                this.status = false
            }
        },
        computed: mapState([
            VUEX_NAME.cardList,
            VUEX_NAME.searchCardList

        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.cCardList,
                VUEX_NAME.cSearchCardList

            ]),
            handle: function (index) {
                if (this.menus1[index] === '扣款') {
                    this.$router.push('/debit/'+ this.$route.params.which +'/' + this.$route.params.index)
                } else if (this.menus1[index] === '冻结') {
                    this.isShow = true
                } else if (this.menus1[index] === '充值') {
                    this.$router.push('/account/'+ this.$route.params.which +'/' + this.$route.params.index)

                }
            },
            handleR: function (index) {
                if (this.menus2[index] === '解冻') {
                    this.isShow = true
                } else if (this.menus1[index] === '扣款') {
                    this.$router.push('/debit/'+ this.$route.params.which +'/' + this.$route.params.index)

                } else if (this.menus1[index] === '充值') {
                    console.log(this.item)
                    this.$router.push('/account/'+ this.$route.params.which +'/' + this.$route.params.index)
                }
            },
            handleInput: function (password) {
                let url
                if (this.item.status === 2) {
                    url = 'card/unfreeze'
                } else {
                    url = 'card/freeze'
                }
                this.$ajax(
                    url,
                    {
                        cardId: this.item.cardId,
                        payPassword: md5(password)
                    },
                    (content) => {
                        if (this.item.status === 2) {
                            this.item.status = 1
                        } else {
                            this.item.status = 2
                        }
                    }, true, true)
            }
        }
    }

</script>
<style lang="less" scoped>
    .myTank-i {
        color: white;
        background-color: #2f87ce;
        padding: 3px 5px;
        border-radius: 3px;
        margin: 0 3px;
    }

    .debit-s-menu {
        right: 0
    }

    .detail-disable {
        .weui-cells {
            background: #f4f5f9
        }
    }

    .account {
        margin-top: 1.17647059em !important;
        .weui-cell__hd {
            font-size: 15px !important;
        }
        .weui-cell__bd {
            font-size: 15px !important;
        }
    }

    .account-confirm-box {
        .weui-dialog__ft {
            display: none;
        }
    }

    .layout {
        background: white;
        position: absolute;
        top: ~'calc(30% - 72px)';
        text-align: center;
        border-radius: 3px;
        padding: 15px 0;
        width: 260px;
        left: ~'calc(50% - 130px)';
        line-height: 30px;
        .layout-title {
            font-size: 16px;
            border-bottom: 1px solid #b9b9b9;
        }
        .layout-label {
            font-size: 14px;
        }
        .layout-amount {
            font-size: 18px;
        }
        .layout-input {
            border: 1px solid #b9b9b9;
            margin: 0;
            padding: 0;
            letter-spacing: 24px;
            text-indent: 12px;
            outline: none;
            font-weight: 800;
            line-height: 35px;
            width: 100%;
            height: 35px;
            font-size: 40px;
            text-align: left;
        }
        .layout-repeat {
            position: absolute;
            display: inline-block;
            height: 35px;
            top: 1px;
            border-right: 1px solid #b9b9b9;
        }
    }

</style>
